@import "vars";
@import "root";

* {
    box-sizing: border-box;
}

html, body {
    padding: 0;
    margin: 0;
    font-size: 16px;
}

a {
    text-decoration: none;
    cursor: pointer;
}

input:focus, select:focus, textarea:focus, button:focus {
    box-shadow: none !important;
    appearance: none !important;
    outline: none !important;
}

@for $i from 0 to 10 {
    .gap-#{$i} {
        gap: #{$i}rem !important;
    }
}

@for $i from 0 to 10 {
    .column-gap-#{$i} {
        column-gap: #{$i}rem !important;
    }
}

@for $i from 0 to 10 {
    .row-gap-#{$i} {
        row-gap: #{$i}rem !important;
    }
}

@for $i from 1 to 10 {
    .blank-#{$i} {
        display: block;
        height: #{$i}rem;
    }
}

.gzdsx-pos-row {
    display: flex;
    flex-wrap: wrap;
}

.gzdsx-pos {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;

    .pos {
        &-navigation {
            background-color: #435856;
            color: #ffffff;
            display: flex;
            column-gap: 10px;

            .menu {
                background-color: #06AEAA;
                padding: 0 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;

                svg {
                    width: 30px;
                    height: 30px;
                    color: #ffffff;
                }
            }

            .store-info {
                font-size: 1.25rem;
                height: 50px;
                line-height: 50px;
            }
        }

        &-body {
            flex: 1;
            display: flex;
        }

        &-col {
            width: 50%;
            display: block;

            &-left {
                border-right: 1px #efeff9 solid;
                display: flex;
                flex-direction: column;
                height: calc(100vh - 50px);
            }
        }

        &-cart {
            height: calc(100vh - 50px);
            display: flex;
            flex-direction: column;
            row-gap: 10px;
            padding: 0 10px 10px 10px;
        }
    }

    .searchbar {
        display: flex;
        padding: 1rem;
        align-items: center;
        column-gap: 1rem;

        .col {
            &-logo {
                img {
                    height: 60px;
                }
            }

            &-input {
                flex: 1;

                .input-control {
                    background: none;
                    width: 100%;
                    border: 1px solid #09adaa;
                    padding: 10px;
                    border-radius: 1px;
                    font-size: 1.15rem;

                    &:focus {
                        border: 1px solid #333;
                        box-shadow: none !important;
                        appearance: none !important;
                    }
                }
            }

            &-calculator {
                .calculator {
                    background-color: $color-primary;
                    width: 43px;
                    height: 43px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    border-radius: 1px;
                    color: #ffffff;
                    font-size: 28px;
                }
            }
        }
    }

    .tabs {
        display: flex;
        column-gap: 5px;

        .tab {
            &-item {
                background-color: $color-primary;
                padding: .7rem 1.2rem;
                line-height: 1;
                cursor: pointer;
                display: flex;
                column-gap: 5px;
                color: #ffffff;

                i {
                    font-size: 14px !important;
                }
            }

            &-active {
                background-color: #EAEAEA;
                color: #333333;
            }
        }
    }

    .tab {
        &-panel {
            display: block;
            height: 100%;
            overflow: hidden;
            position: relative;

            .empty-box {
                background-image: url(../assets/store_register.svg);
                background-color: transparent;
                background-repeat: no-repeat;
                background-position: center;
                opacity: .5;
                width: 100%;
                height: 100%;
            }
        }

        &-scroll {
            height: 100%;
            width: 100%;
            display: block;
            overflow-x: hidden;
            overflow-y: auto;
            position: absolute;
            left: 0;
            top: 0;
        }
    }

    .product {
        &-list {
            padding: 20px;
            display: grid;
            grid-gap: 20px;
            grid-template-columns: 1fr 1fr 1fr;

            &__category {
                display: grid;
                grid-template-columns: 60px 1fr;
                grid-template-rows: 100%;
                overflow: hidden;
                height: 100%;
            }

            &__go-back-wrapper {
                padding: 20px 0 0 17px;
            }

            &__go-back {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 200px;
                width: 100%;
                background: rgba(0, 0, 0, .1);
                color: #fff;
                cursor: pointer;
            }

            &__list {
                height: 100%;
                overflow-x: hidden;
                overflow-y: auto;
            }
        }

        &-item {
            display: block;
            position: relative;
            background-color: #ffffff;
        }

        &-image {
            position: relative;

            &:before {
                content: " ";
                display: block;
                padding-bottom: 92%;
            }

            img {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                cursor: pointer;
            }
        }

        &-heading {
            position: absolute;
            background-color: rgba(67, 67, 67, .75);
            padding: 10px;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            column-gap: 10px;
            left: 0;
            bottom: 0;
            width: 100%;
            color: #ffffff;
            line-height: 1.1;
        }
    }
}

@import "common";
@import "layouts";
@import "number-control";
@import "autocomplete";
@import "widgets";
@import "dialog";
@import "dropdown";
@import "form";
@import "customer";
@import "text";
@import "switch";
@import "number-pad";
@import "cart";
@import "order";